<template>
  <div class="sll">
    <!-- 修改组件 skipSign:true //跳过检验-->
    <el-tooltip class="item" effect="dark" content="修改" placement="bottom-start">
      <el-button style="color:#0B9AC3;border:none;" icon="el-icon-edit" circle @click="modificationiClick"></el-button>
      <!-- @click="DialogVisibleMods = true" -->
    </el-tooltip>
    <div class="diaologs">
      <el-dialog title="编辑" :visible.sync="DialogVisibleMods" width="760px" :before-close="handleCloses" :show-close="false" :modal-append-to-body="false" style="text-align: left;" modal>
        <!-- :key="keyNumb" -->
        <div class="list" v-for="(item,index) in attributeOrderClone" :key="index" v-if="item.modificationSign">
          <!-- {{attributeOrderClone}} -->
          <!-- {{searchOption}}
          {{searchOptions}}-->
          <!-- {{fromModData}} -->
          <!-- {{modData}} -->
          <!-- {{optionsZi}} -->
          <!-- {{searchOptionTable}} -->
          <!-- <dictionaries :searchData='attributeOrder' :modelType='modelType'></dictionaries> -->
          <span class="fon">
            <span v-if="!item['skipSign']&&item['Exp']!=''" style="color:red;">*</span>
            {{item.CN}}:
          </span>
          <span class="inb" v-if="item.type==='input'">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="fromModData[item.EN]" v-if="item.EN==='notes' || item.EN==='memo'"></el-input>
            <el-input v-else-if="item.EN==='companyCode'" v-model="fromModData[item.EN]" placeholder="请输入内容" clearable @blur="BurExp($event,item,index)" size="mini" @input="sbusinessHall(fromModData[item.EN])"></el-input>
            <el-input :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请输入内容" @blur="BurExp($event,item,index)" clearable size="mini" v-else></el-input>

          </span>
          <!-- <span v-if="!item.result" class="font_color">{{item.err}}</span> -->
          <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
            <el-button icon="el-icon-warning" circle></el-button>
          </el-tooltip>
          <span class="inb" v-if="item.type=='date'">
            <!-- <h1>{{modData.createTime}}</h1> -->
            <el-date-picker :disabled="item.examineDisabled" v-model="fromModData[item.EN]" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime" style="width:90%" size="mini"></el-date-picker>
          </span>
          <!-- select--------------------------------------- -->
          <!-- {{fromModData}} -->
          <span v-if="item.type=='select'" class="inb">
            <!-- 字典  typeGroupCode -->
            <!-- {{fromModData}} -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-if="item.typeGroupCode" @change="changeFromModData">
              <!-- {{fromModData[item.EN]}} -->
              <el-option v-for="i in optionsZi[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
            <!-- 字典 dictTable-->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-else-if="item.dictTable">
              <el-option v-for="i in searchOptionTable[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
            <!-- 小区管理页面   superior -->
            <el-cascader v-else-if="item.EN == 'superior'" v-model="fromModData[item.EN]" :options="superiorListOption" :props="{ checkStrictly: true }" size="mini" clearable></el-cascader>
            <!-- 租户管理员管理页面---租户 -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-else-if="item.EN == 'sysCompanyCode'" @change="sysCompanyCodeChange(fromModData[item.EN])">
              <!-- {{fromModData[item.EN]}} -->
              <el-option v-for="i in getFindByTypeData" :key="i.value" :label="i.name" :value="i.sysCompanyCode"></el-option>
            </el-select>
            <!-- 租户管理员管理页面---角色 -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-else-if="item.EN == 'groupId'" @change="sysRoleChange">
              <!-- {{fromModData[item.EN]}} -->
              <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
            </el-select>
            <el-select v-else v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable @change="getBusinessHallName">
              <el-option v-for="i in businessHall" :key="i.id" :label="i.businessHallName" :value="i.id"></el-option>
            </el-select>
          </span>
          <!-- user -->
          <span v-if="item.type=='user'">
            <!-- {{useruData}} -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini">
              <el-option v-for="i in useruData" :key="i.value" :label="i.name" :value="i.id"></el-option>
            </el-select>
          </span>
          <!-- 单选 -->
          <span v-if="item.type=='radio'">
            <!-- {{item.radio}} -->
            <div style="margin-top: 20px">
              <el-radio-group v-model="fromModData[item.EN]" size="small">
                <el-radio-button v-for="i in item.radio" :label="i.code" :key="i.code">{{i.name}}</el-radio-button>
              </el-radio-group>
            </div>
          </span>
          <!-- 计数器 -->
          <span v-if="item.type=='number'">
            <span style="margin-top: 20px">
              <el-input-number v-model="fromModData[item.EN]" :min="1" label="描述文字" size="mini"></el-input-number>
            </span>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="modifyData(true,modData)" size="mini">确定</el-button>
          <el-button @click="modifyData(false,modData)" size="mini">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  selectNameByuserId,
  getSelectByCodeAndType, //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from '@/api/TenantAdministratorManagement'
import { searchFlBusinessHall } from '@/api/admin/flPayConfig/index'

// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  name: 'modificationi',
  props: [
    'modData',
    'attributeOrder',
    'optionsZi',
    'searchOptionTable',
    'TD',
    'UserArr',
    'useruData',
    'getFindByTypeData',
    'superiorListOption',
  ],
  data() {
    return {
      keyNumb: 0,
      DialogVisibleMods: false,
      //深克隆
      attributeOrderClone: undefined,
      //表单里面的值
      fromModData: undefined,
      // 组件类型
      modelType: 'search',
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      //编辑里面单选
      XTD: undefined,
      //查用户
      // useruData:[],
      // 备注
      textarea: '',
      // 改变的数据
      sysCompanyCodeRoles: '',
      // 租户信息
      // getFindByTypeData:[],
      // 返回的角色对象
      roleArr: [],
      // 返回的角色对象-默认值
      roleArrObj: '',
      businessHall: [],
      businessHallName: '',
    }
  },

  watch: {
    optionsZi(newVal) {
      // console.log(newVal);
      this.searchOption = newVal
    },
    searchOptionTable(newVal) {
      // console.log(newVal);
      this.searchOptions = newVal
    },
    modData(newData) {
      // console.log(newData,'888666');
      this.getUpdataWatch()
    },
    attributeOrder: {
      deep: true,
      handler(newValue, oldValue) {
        // console.log('深度监听attributeOrder!')
        // console.log(newValue)
        this.attributeOrderClone = JSON.parse(JSON.stringify(newValue))
      },
    },
  },
  computed: {
    TableDataModel() {
      let new_DataModel = JSON.parse(JSON.stringify(this.attributeOrder))
      for (let i = 0; i < new_DataModel.length; i++) {
        if (!new_DataModel[i].modificationSign) {
          console.log('-------------计算属性-----------')
          new_DataModel.splice(i, 1)
        }
      }
      // console.log(new_DataModel);
      return new_DataModel
    },
  },
  mounted() {
    ;[this.attributeOrderClone, this.fromModData, this.XTD] = JSON.parse(
      JSON.stringify([this.attributeOrder, this.modData, this.TD])
    )
    // this.changeDictionariesType(this.fromModData)
    // console.log(XID)
    // console.log('*****************')
    // console.log(this.attributeOrderClone)
    // console.log(this.fromModData)
    // console.log(this.modData,99888);
  },
  methods: {
    // 更新 营业厅名称
    getBusinessHallName(val) {
      let rsult = this.businessHall.filter((item) => item.id == val)
      this.businessHallName = rsult.length && rsult[0].businessHallName
      this.$emit('update:sellerareaName', this.businessHallName)
    },
    async sbusinessHall(val) {
      let { flag, data } = await searchFlBusinessHall({ sysCompanyCode: val })
      this.businessHall = (flag && data) || []
      console.log('水司code', val, data)
    },
    changeFromModData() {
      // this.changeDictionariesType(this.fromModData)
    },
    // 字典值的类型转换
    changeDictionariesType(fromModData) {
      // console.log(fromModData,'改变之前');
      for (const key in fromModData) {
        if (fromModData.hasOwnProperty(key)) {
          const element = fromModData[key]
          let elements
          if (element) {
            elements = String(element)
          }
          fromModData[key] = elements
        }
      }
      // console.log(fromModData,'改变之后');
    },
    modificationiClick() {
      console.log(this.fromModData, '每一次改变')

      // this.changeDictionariesType(this.fromModData)
      // this.keyNumb = this.keyNumb + 1
      // 打开窗口
      this.DialogVisibleMods = true
      // this.$emit('modificationiClickData','点击修改')
      // 获取角色原始数据
      this.getSelectNameByuserIds()
    },
    // 添加
    // addRoleModel(){
    //   roleId
    // },
    // 获取角色原始数据
    async getSelectNameByuserIds() {
      // console.log(1,'ccccccccccccccc');
      // console.log(this.fromModData);
      // let fromModData = undefined
      // this.$nextTick(function(){
      // fromModData = this.fromModData
      // })
      // 赋值
      console.log(this.modData, '999')
      const sysCompanyCode = this.modData.sysCompanyCode
      const id = this.modData.id

      if (this.modData.sysCompanyCode) {
        // let sysCompanyCode = undefined
        // const sysCompanyCode = this.fromModData.sysCompanyCode
        // this.$nextTick(function(){
        //   sysCompanyCode = this.modData.sysCompanyCode
        // })
        // console.log(this.$parent.$parent.$parent,'youme');
        // console.log(sysCompanyCode,'???');
        const res = await selectNameByuserId(id)
        // const res = this.$parent.$parent.$parent.getSelectNameByuserId(id)
        // 如何将   ----转换格式？？？
        console.log(res, 999922222)
        const objRole = res.data
        if (objRole) {
          this.modData.groupId = objRole.id
          this.roleArr = [objRole]
        }
        // 转换后拿到的数据
        // 赋值
        // this.modData.groupId = res.data
        // this.roleArr = 返回的数据

        // 根据水司code 查找营业厅
        this.sbusinessHall(this.modData.companyCode)
      }
    },
    // 角色
    sysRoleChange(newvalue) {
      // this.$emit('sysRoleChangeData',newvalue)
      const roleArrs = this.roleArr
      var id = ''
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index]
        id = roleArrs[index].id
      }
      this.$emit('sysRoleIdq', id)
      console.log(id, '????')
    },
    // 租户改变函数
    async sysCompanyCodeChange(value) {
      const res = await getSelectByCodeAndType(value)
      console.log(
        res,
        '子组件用于添加租户管理员时选择租户后之间传回选择租户的角色'
      )
      const roleObjs = res.data
      // console.log(roleObjs,96968888);

      if (roleObjs) {
        this.roleArr = roleObjs
        // console.log([roleObjs],999999999);

        console.log(this.roleArr, 8888888888888)
      } else {
        console.log('该租户没有对应的角色')
      }
    },
    // 更新数据
    getUpdataWatch() {
      ;[this.attributeOrderClone, this.fromModData, this.XTD] = JSON.parse(
        JSON.stringify([this.attributeOrder, this.modData, this.TD])
      )
      // this.changeDictionariesType(this.fromModData)
    },
    // 字典回调
    // dictionariesCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOption = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
    // 跨表字典回调
    // dictionariesTableCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOptionTable = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
    handleCloses(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.modifyData(false, this.modData)
          done()
        })
        .catch((_) => {})
    },
    //转化时间格式
    getSTime(val) {
      this.modData.createTime = val
    },
    //确定修改-取消修改
    modifyData(value, modData) {
      // this.changeDictionariesType(this.fromModData)
      //value=true  确定修改
      //value=false  取消修改
      // console.log(value,modData)
      let bur = true
      if (value === false) {
        this.$emit('modifyData', false, this.fromModData)
        this.DialogVisibleMods = false
        console.log(this.fromModData, 'zheshishenem')

        // this.$message({
        //   message: "已取消修改",
        //   type: "success"
        // });
      } else {
        console.log(this.attributeOrderClone, 'shenme?')
        for (let i = 0; i < this.attributeOrderClone.length; i++) {
          // console.log(this.attributeOrderClone[i].value,'前');
          this.attributeOrderClone[i].value =
            this.fromModData[this.attributeOrderClone[i].EN]

          // console.log(this.attributeOrderClone[i].value,'后');
          let at = this.attributeOrderClone[i]
          // -----------------------------
          // if (at.modificationSign) {
          //   if (at.result === false || at.value == '') {
          //     console.log(at);
          //     console.log(bur,888);
          //     // 判断红色星号    是否必须为空
          //     if (at["skipSign"]) {
          //       bur = true;
          //     }
          //     else{
          //       bur = false
          //       break;
          //     }
          //   }
          //   else{
          //   }
          // }
          // =----------------------------

          if (at.modificationSign && !at['skipSign']) {
            console.log(at, 777777777)

            if (
              at.result === false ||
              at.value === '' ||
              at.value === undefined
            ) {
              console.log(at, 66666666666)
              // 判断红色星号    是否必须为空
              console.log(at.value, 22)
              // numberqq +=1
              bur = false
              break
            }
          } else {
            if (at.result === false) {
              bur = false
              break
            }
          }
          // if (this.attributeOrderClone[i].value == "") {
          //   console.log("测试");
          //   console.log(this.attributeOrderClone[i]);
          // }
        }
        console.log(bur, 9999)

        if (bur === true && value === true) {
          console.log(88888)

          this.$emit('modifyData', value, this.fromModData)
          this.DialogVisibleMods = false
          // this.$message({
          //   message: "修改成功",
          //   type: "success"
          // });
        } else if (bur === false && value === true) {
          this.$message({
            message: '请输入合法内容！',
            type: 'warning',
          })
        }
      }
    },

    //正则表达式
    BurExp(e, item, index) {
      // if (this.attributeOrderClone[index].attributeOrderClone) {
      if (this.attributeOrderClone[index].skipSign && e.target.value === '') {
        item.result = true
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value)
        item.result = boolean
      }
    },
  },
  created() {
    // this.getSelectNameByuserIds()
  },
}
</script>
<style scoped src="src/styles/allCss.css"></style>
<style lang="scss" scoped>
.sll {
  /deep/.is-circle {
    padding: 14px !important;
  }
  .diaologs {
    .el-dialog__wrapper {
      /deep/.dialog {
        width: 760px;
        // padding-right: 20px;
      }
    }
  }

  // /deep/.el-dialog{
  //   .el-dialog__header{
  //   width: 780px;
  //   }
  //   .el-dialog__body{
  //   width: 780px;
  //   }
  // }
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    // height: 44px;
    // width: 370px;
    // width: 320px;
    // margin-left: 20px;
    // height: 44px;
    // width: 300px;
    // .inb{
    //   height: 44px;
    //   width: 370px;
    // }
    // margin: 0;
    // padding: 0;
    .fon {
      text-align: right;
      margin-right: 14px;
      width: 99px;
      .inb {
        height: 44px;
        width: 370px;
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0 !important;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
  }
}
</style>


